
import React from 'react'
import { AppOutline, MessageOutline, UserOutline } from 'antd-mobile-icons';
import { TabBar } from 'antd-mobile'
import {
    useLocation,
    MemoryRouter as Router,
    useNavigate,
  } from 'react-router-dom'

export default function Tabs(props) {
    const history = useNavigate()
    const location = useLocation()
    const { pathname } = location
  
    const setRouteActive = (value: string) => {
        console.log(value);
        
      history(value)
    }
    const tabs = [
        {
          key: '/Homepages/Home',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: '/Homepages/message',
          title: '消息',
          icon: <MessageOutline />,
        },
        {
          key: '/Homepages/PersonalCenter',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
  return (
    <>
    {/* {props.children} */}
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
    {tabs.map(item => (
      <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
    ))}
  </TabBar>
  
  </>
  )
}
